<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=EDGE">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>ECharts China Map</title>
  <style>
    * {
      padding:0;
      margin:0;
      outline:none;
      box-sizing:border-box;
    }
    body {
      width:100vw;
      height:100vh;
      overflow-y:auto;
    }
    #china-map {
      padding:0;
      margin:0;
      width: 100vw;
      height: 100vw;
      margin: 0 auto;
      margin-top:10vw;
      z-index:-1;
    }
    .head-title-box {
      width:100vw;
      height:30vw;
      padding-top:5vw;
      display:flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      margin:0 auto;
    }
    .head-title-box > div {
      text-align:center;
    }
    .head-title {
      width:100vw;
      line-height: 8vw;
      height:8vw;
    }
    .head-title:nth-child(1) {
      font-size:5vw;
      font-weight:bold;
    }
    .head-title:nth-child(2) {
      font-size:3.5vw;
    }
    .relay {
      padding:0 3vw;
      height:6vw !important;
      line-height:6vw;
      font-size:3.5vw;
      border:1px solid black;
      border-radius:10vw;
    }
    .barrage-box {
      width:90vw;
      height:50vw;
      float:left;
      margin-top:-90vw;
      margin-left:5vw;
      display:flex;
      flex-direction: column;
      justify-content: space-around;
      pointer-events: none;
    }
    .barrage {
      width:40vw;
      height:8vw;
      background-color: rgba(106, 191, 231, 0.274);
      border-radius: 8vw;
      font-size:4vw;
      line-height:8vw;
      text-align:center;
      color:rgb(212, 168, 71);
      overflow:hidden;
      padding:0 4vw;
      pointer-events: none;
    }
    .barrage > p {
      display:inline-block;
      margin-left:0;
      animation: 50s wordsLoop linear infinite normal;
      white-space: nowrap;
      overflow:hidden;
      pointer-events: none;
    }
    @keyframes wordsLoop {
      0% {
        transform: translateX(0);
        -webkit-transform: translateX(0);
      }
      100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
      }
    }
    .barrage:nth-child(1),.barrage:nth-child(3) {
      align-self:flex-start;
    }
    .barrage:nth-child(2) {
      align-self:flex-end;
    }
    .barrage:nth-child(4) {
      align-self: center;
    }
    .chear-box {
      width:90vw;
      height:40vw;
      display:flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      margin:0 auto;
      position:relative;
      top:-13vw;
    }
    .chear-box > div {
      margin:0 auto;
      text-align:center;
    }
    .ad {
      font-size:4vw;
    }
    .input-box {
      width:70vw;
      height:8vw;
      display:flex;
      justify-content: center;
      align-items: center;
      border:1px solid rgb(131, 129, 129);
    }
    .input-box > input {
      appearance:none;
      width:100%;
      height:100%;
    }
    .button {
      padding:3vw 4vw;
      background-color: rgb(74, 156, 223);
      color:white;
      border-radius: 2vw;
      font-size:4vw;
    }
  </style>
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/echarts.min.js"></script>
  <script type="text/javascript" src="js/map/china.js"></script>
</head>

<body>
  <div class="head-title-box">
    <div class="head-title">为武汉加油!</div>
    <div class="head-title">一起为武汉加油, 为中国加油</div>
    <div class="relay">共 00000 人接力</div>
  </div>
  <div class="message-box">
    <div id="china-map"></div>
    <div class="barrage-box">
      <div class="barrage">
        <p>
          弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕
          弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕
          弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕
          弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕
          弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕
          弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕
        </p>
      </div>
      <div class="barrage">
        <p>
          弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕
          弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕
          弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕
          弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕
          弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕
          弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕
        </p>
      </div>
      <div class="barrage">
        <p>
          弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕
          弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕
          弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕
          弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕
          弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕
          弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕
        </p>
      </div>
      <div class="barrage">
        <p>
          弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕
          弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕
          弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕
          弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕
          弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕
          弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕弹幕
        </p>
      </div>
    </div>
  </div>
  <div class="chear-box">
    <div class="ad">
      宣传语XXXXXXX
    </div>
    <div class="input-box">
      <input type="text" />
    </div>
    <div class="button">
      为武汉加油接力
    </div>
  </div>
  <script>
    var myChart = echarts.init(document.getElementById('china-map'));

    var provinces = ['shanghai', 'hebei', 'shanxi', 'neimenggu', 'liaoning', 'jilin', 'heilongjiang', 'jiangsu', 'zhejiang', 'anhui', 'fujian', 'jiangxi', 'shandong', 'henan', 'hubei', 'hunan', 'guangdong', 'guangxi', 'hainan', 'sichuan', 'guizhou', 'yunnan', 'xizang', 'shanxi1', 'gansu', 'qinghai', 'ningxia', 'xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen'];

    var colorList = ['#5475f5', '#9feaa5', '#85daef','#74e2ca', '#e6ac53', '#9fb5ea'];
    var numLimit = [10000, 1000, 100, 10, 1];
    var provincesText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门'];

    var seriesData = [{
      name: '北京',
      value: 100000
    }, {
      name: '天津',
      value: 1000
    }, {
      name: '上海',
      value: 7000
    }, {
      name: '重庆',
      value: 8000
    }, {
      name: '河北',
      value: 60
    }, {
      name: '河南',
      value: 60
    }, {
      name: '云南',
      value: 0
    }, {
      name: '辽宁',
      value: 0
    }, {
      name: '黑龙江',
      value: 0
    }, {
      name: '湖南',
      value: 60
    }, {
      name: '安徽',
      value: 0
    }, {
      name: '山东',
      value: 60
    }, {
      name: '新疆',
      value: 0
    }, {
      name: '江苏',
      value: 0
    }, {
      name: '浙江',
      value: 0
    }, {
      name: '江西',
      value: 0
    }, {
      name: '湖北',
      value: 60
    }, {
      name: '广西',
      value: 60
    }, {
      name: '甘肃',
      value: 0
    }, {
      name: '山西',
      value: 60
    }, {
      name: '内蒙古',
      value: 0
    }, {
      name: '陕西',
      value: 0
    }, {
      name: '吉林',
      value: 0
    }, {
      name: '福建',
      value: 0
    }, {
      name: '贵州',
      value: 0
    }, {
      name: '广东',
      value: 597
    }, {
      name: '青海',
      value: 0
    }, {
      name: '西藏',
      value: 0
    }, {
      name: '四川',
      value: 60
    }, {
      name: '宁夏',
      value: 0
    }, {
      name: '海南',
      value: 60
    }, {
      name: '台湾',
      value: 0
    }, {
      name: '香港',
      value: 0
    }, {
      name: '澳门',
      value: 0
    }, {
      name: '南沙诸岛',
      value: 0
    }];


    initEcharts();

    // 初始化echarts
    function initEcharts() {
      var tmpSeriesData = seriesData;

      var option = {
        title: {
          text: '',
          left: 'center'
        },
          tooltip: {
              trigger: 'item',
              formatter: '{b}<br/>{c}人助力'
          },
          visualMap: {  
            show : true,  
            x: 'left',  
            y: '50%',  
            splitList: [   
              {start: 10000, end:Infinity},{start: 1000, end: 9999},  
              {start: 100, end: 999},{start: 10, end: 99},  
              {start: 0, end: 10},  
            ],  
            color: colorList  
          },
        series: [
          {
            name: '中国',
            type: 'map',
            mapType: 'china',
            roam: false,//是否开启鼠标缩放和平移漫游
            data: tmpSeriesData,
            top: "3%",//组件距离容器的距离
              zoom:1.1,
              selectedMode : 'single',

              label: {
                  normal: {
                      show: true,//显示省份标签
                      textStyle:{
                                  color: '#000',
                                  fontSize: 8,
                                  fontWeight: 'bold',
                                }//省份标签字体样式
                  },
                  emphasis: {//对应的鼠标悬浮效果
                      show: false,
                      textStyle: {
                        color: '#000'
                      }
                  }
              },
              itemStyle: {
                  normal: {
                      borderWidth: .5,//区域边框宽度
                      borderColor: '#0550c3',//区域边框颜色
                      color: 
                        function (params) { // 设置颜色
                          let itemValue = params.data.value;
                          var index = 0;
                          if (itemValue > 10000) index = 0;
                          else if (itemValue > 1000) index = 1;
                          else if (itemValue > 100) index =2;
                          else if (itemValue > 10) index = 3;
                          else index = 4;
                          return colorList[index];
                        }
                  },
                  emphasis: {
                      borderWidth: .5,
                      borderColor: '#0550c3',
                      color:
                        function (params) { // 设置颜色
                          let itemValue = params.data.value;
                          var index = 0;
                          if (itemValue > 10000) index = 0;
                          else if (itemValue > 1000) index = 1;
                          else if (itemValue > 100) index =2;
                          else if (itemValue > 10) index = 3;
                          else index = 4;
                          return colorList[index];
                        }
                  }
              },
          }
        ]
      };
      myChart.setOption(option);

      myChart.off("click");
    }
  </script>
</body>

</html>